<template>
    <div class="echart-chart">
        <div class="inside">
            <header><i class="el-icon-location-outline"></i> 存量房季度调整后数字</header>
            <div class="chartBox clearfix">
                <article v-show="!chartNoDataShow">
                    <radioGroup ref="radioGroup" @radioChange="filterYearChange"></radioGroup>
                    <p>图表上的圆形标注点为历史数据最大值及最小值</p>
                    <div class="chart-div" id="InventoryMeasure_SSA_Zip_Public-chart" style="height: 300px;"></div>
                </article>
                <h4 ref="InventoryMeasure_SSA_Zip_Public_chart_NoData" v-show="chartNoDataShow"></h4>
            </div>
            <p v-show="false">{{getzipcode}}</p>

        </div>
    </div>
</template>

<script>
    import { radioGroup } from '@/mixin/echarts_radio';//公共mixin混入——radio-group组件

    export default {
        mixins: [radioGroup],
        data() {
            return {
                myEcharts: '',
                chartNoDataShow: false, //判断是否有无数据

            }
        },
        computed: {
            //房源详情页图表使用——本房源所在邮zipcode
            getzipcode() {
                if(this.$store.getters.get_houseDetailsZipcode){
                    //获取存量房季度调整后数字数据
                    this.get_InventoryMeasure_SSA_Zip_Public(3);
                }
                return this.$store.getters.get_houseDetailsZipcode
            },

        },
        created() {
        },
        mounted() {
            this.myEcharts = echarts.init(document.getElementById('InventoryMeasure_SSA_Zip_Public-chart'));
            this.myEcharts.showLoading();
            window.addEventListener('resize', () => {
                this.myEcharts.resize();
            });
        },
        beforeDestroy () {
            if(this.myEcharts){
                this.myEcharts.dispose();
            }
        },
        methods: {
            //获取存量房季度调整后数字数据
            get_InventoryMeasure_SSA_Zip_Public(filterYearValue) {
                this.$get(`/analysis/time/2/${this.$store.getters.get_houseDetailsZipcode}`,{
                    t: filterYearValue
                }).then(res => {
                    if (res.status == 0) {
                        if(res.data == null || res.data.length == 0){
                            this.chartNoDataShow = true;
                            this.$refs.InventoryMeasure_SSA_Zip_Public_chart_NoData.innerText = '暂未查询到数据！';
                        }else{
                            this.chartNoDataShow = false;
                            this.InventoryMeasure_SSA_Zip_Public_charts(res.data);
                        }
                    } else {
                        this.chartNoDataShow = true;
                        this.$refs.InventoryMeasure_SSA_Zip_Public_chart_NoData.innerText = res.msg;
                    }
                });
            },
            //存量房季度调整后数字——折线图
            InventoryMeasure_SSA_Zip_Public_charts(data){
                this.myEcharts.hideLoading();
                //提取出value有值的数据，为''或0的剔除掉
                let dateList = [];
                let valueList = [];
                data.forEach((item) =>{
                    if(item.value && item.value != 0.00 && item.value != "NA"){
                        dateList.push(item.time);
                        valueList.push(item.value);
                    }
                });
                this.myEcharts.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis:{
                        type: 'category',
                        data: dateList,
                        //坐标轴刻度标签的相关设置
                        axisLabel:{
                            color: '#969696',
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            lineStyle:{
                                color: '#969696'
                            }
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    yAxis: {
                        type: 'value',
                        //分隔线的相关设置
                        splitLine: {
                            lineStyle:{
                                color: '#f1f1f1'
                            }
                        },
                        //坐标轴刻度标签的相关设置
                        axisLabel: {
                            color: '#969696',
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            lineStyle:{
                                color: '#969696'
                            }
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    dataZoom: [
                        {
                            type: 'inside',
                            start: 0,
                            end: 100
                        }, {
                            show: true,
                            start: 0,
                            end: 100,
                        }
                    ],
                    series: [
                        {
                            name: '存量房季度调整后数字',
                            type: 'bar',
                            barGap: 0,
                            label: {
                                show: true,
                            },
                            data: valueList,
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值', symbolSize: 65, itemStyle:{ color: '#f44336'}},
                                    {type: 'min', name: '最小值', symbolSize: 65, itemStyle:{ color: '#03a9f4'}}
                                ],
                                label:{
                                    formatter: param => {
                                        return param.value +'套';
                                    }
                                }
                            }
                        },
                    ],
                    color: ['#82dfc2'],
                });
            },
            //接收公共mixinradio-group组件的change事件——按年份筛选
            filterYearChange(filterYearValue) {
                this.myEcharts.showLoading();
                this.get_InventoryMeasure_SSA_Zip_Public(filterYearValue);
            },

        },
        components: {
            radioGroup,//公共mixin混入——radio-group组件

        }
    }
</script>

<style scoped lang="less" type="text/less">
</style>
